<template>
  <div class="main">
    <el-card class="box-card">
      <div class="top">
        <div>区域搜索：</div>
        <el-input v-model="search" class="input" size="medium" placeholder="请输入" />
        <el-button type="primary" size="small" @click="serchIt()">
          <i class="el-icon-search" />
          查询
        </el-button>
      </div>

    </el-card>
    <el-card class="table">
      <el-button type="warning" class="add" @click="openDialog('add')"> <i class="el-icon-circle-plus-outline" />新建</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="120"
          type="index"
        />
        <el-table-column
          prop="name"
          label="区域名称"
          width="300"
        />
        <el-table-column
          prop="nodeCount"
          label="点位数"
          width="300"
        />
        <el-table-column
          prop="remark"
          label="备注说明"
          width="300"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="200"
        >
          <template #default="{row}">
            <el-button type="text" @click="openDetail(row.id,row.name)">查看详情</el-button>
            <el-button type="text" @click="openDialog('edit',row.id)">修改</el-button>
            <el-button type="text" class="delete" @click="tips(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <PageTool :info="queryPage" @handleCurrentChange="handleCurrentChange" />
    </el-card>
    <!-- ------------------------分页-----------------TODO---------------------------------- -->

    <!-- -----------------添加以及修改弹窗----------------- -->
    <el-dialog
      :title="cardTitle"
      :visible.sync="dialogVisible"
      width="40%"
      @close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="区域名称 :" prop="regionName">
          <el-input
            v-model="form.regionName"
            maxlength="15"
            show-word-limit
            placeholder="请输入"
            class="diaInput"
          />
        </el-form-item>
        <el-form-item label="备注说明 :" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            maxlength="40"
            show-word-limit
            placeholder="请输入备注(不超过40字)"
            class="diaInput"
            rows="3"
          />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- ----------------------------详情弹窗------------------------ -->
    <el-dialog

      title="区域详情"
      :visible.sync="detailDIA"
      width="45%"
    >
      <el-form label-width="140px">
        <el-form-item v-for="item in detTable" :key="item .id" label="区域名称 :">
          <span>{{ area }}</span>
        </el-form-item>
        <el-form-item label="备注说明 :">
          <el-table
            v-loading="loading"
            :data="detTable"
          >
            <el-table-column

              label="序号"
              width="100"
              type="index"
            />
            <el-table-column
              label="点位名称"
              width="200"
            >
              <!-- 插槽干掉prop -->
              <template #default="{row}">
                {{ row.name }}
              </template>
            </el-table-column>
            <el-table-column
              label="设备数量"
            > <!-- 插槽干掉prop -->
              <template #default="{row}">
                {{ row.vmCount }}
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getAreaList, areaDetail, UpdateArea, AddArea, deleteArea } from '@/api/point/area'
import { areatPoints } from '@/api/point/pointS'
import PageTool from '@/views/equipment/components/page-tool.vue'
export default {
  name: '',
  components: {
    PageTool
  },
  props: {
  },
  data() {
    return {
      loading: true,
      detailDIA: false,
      form: {
        regionName: '',
        remark: ''

      },
      rules: {
        regionName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ] },
      dialogVisible: false,
      search: '',
      tableData: [],
      type: 'add',
      queryPage: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      detTable: [],
      area: ''
    }
  },
  computed: {
    cardTitle() {
      if (this.type === 'add') {
        return '新增区域'
      } else {
        return '修改区域'
      }
    }
  },
  created() {
    this.areaList()
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.queryPage.pageIndex = val
      this.areaList()
    },
    // 查询框搜索
    serchIt() {
      this.tableData = this.tableData.filter(item => item.name === this.search)
    },
    // 获取地区列表
    async areaList() {
      const { totalCount, totalPage } = await getAreaList(this.queryPage)
      this.queryPage.totalCount = totalCount
      this.queryPage.totalPage = totalPage

      const { currentPageRecords } = await getAreaList(this.queryPage)
      this.tableData = currentPageRecords
      console.log(currentPageRecords)
    },
    // 删除提示
    async tips(id) {
      await deleteArea(id)
      this.$message.success('删除成功')
      this.areaList()
    },
    // 打开详情弹窗
    async openDetail(id, area) {
      this.area = area
      this.detailDIA = true
      this.loading = true
      const { currentPageRecords } = await areatPoints({ regionId: id, pageIndex: this.queryPage.pageIndex, pageSize: this.queryPage.pageSize })
      console.log(currentPageRecords)
      this.detTable = currentPageRecords
      this.loading = false
    },
    // 打开添加或修改弹窗
    async openDialog(type, id) {
      this.dialogVisible = true
      this.type = type
      if (this.type !== 'add') {
        const data = await areaDetail(id)
        console.log(data)
        this.id = data.id
        this.form.regionName = data.name
        this.form.remark = data.remark
      }
    },
    // 关闭弹窗
    close() {
      console.log(1)
      this.form.regionName = ''
      this.form.remark = ''
      this.dialogVisible = false
    },
    // 提交修改
    async update() {
      if (this.type !== 'add') {
        await UpdateArea(this.id, this.form)
        this.$message.success('修改成功')
      } else {
        await AddArea(this.form)
        this.$message.success('添加成功')
      }
      this.areaList()
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang='scss'>
.delete{
  color: red;
}
.el-icon-circle-plus-outline{
  margin-right: 7px;
}
.main{
  margin-top: 70px;
  padding: 0 20px;
}
.diaInput{
  width: 350px;
}
  .top{
display: flex;
justify-content: flex-start;
align-items: center;
  .input{
  width: 200px;
  margin-right: 15px;
}
  }
  .table{
    width: 100%;
    margin-top: 20px;
  }
.add{
  margin-bottom: 25px;
}
</style>
